import React, { Component } from 'react';
import {connect} from 'react-redux';

//用以获取商品列表信息
class ComB extends Component {
    
    handleClick =() => {
        // console.log(this.props);
        this.props.getProList()
    }

    renderList = () =>{
        console.log('ComB:' ,this.props);
        if(!this.props.proList) return null
        return this.props.proList.map(item => {
            console.log(this.props);
            
            return (
                <div key={item.name}>
                    <div>{item.name}</div>
                    <div>{item.price}</div>
                </div>
            )
        })
        
    }

    render() {
        return (
            <div>
                <button onClick={this.handleClick}>点击发送Action，获取商品列表信息</button>
                <br/>
                商品信息：
                {this.renderList()}
            </div>
        );
    }
}

// 第一个参数函数方法
const mapStateToProps = (state) => {
    // console.log('ComB:', state);
    return {...state.pro} 
}

// 第二个参数函数方法
const mapDispatchToProps = (dispatch) => {
    return {
        getProList: () => {
            dispatch({
                type: 'get_proList'
            })
        }
    }
}

// ComA 既要发送Action也要接收返回的用户信息。所以两个参数都需要用到
export default connect(mapStateToProps, mapDispatchToProps)(ComB);